<template>
  <div class="main ad-manage-list">
    <section>
      <div v-if="rightsButtons['add']" class="btn-block">
        <router-link :to="{name: 'b-iconAdd',params:{type:'ICON'}}" class="filter-item">
          <el-button
            type="success"
            size="small"
            icon="el-icon-circle-plus"
            plain
          >新建广告</el-button>
        </router-link>
      </div>
      <el-form
        ref="searchForm"
        class="search-block"
        :model="listQuery"
        label-position="left"
        label-width="82px"
      >
        <input
          type="text"
          style="display: none"
        />
        <!--form input placeholder-->
        <el-row :gutter="50">
          <el-col
            :xs="24"
            :sm="12"
            :md="12"
            :lg="8"
            :xl="6"
          >
            <el-form-item
              label="标题:"
              prop="keyword"
            >
              <el-input
                @keyup.enter.native="search"
                v-model="listQuery.keyword"
                placeholder="标题"
                maxlength="50"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
            <el-form-item label="所属广告位：" label-width="100px" prop="position">
              <el-select v-model="listQuery.position" placeholder="请选择">
                <el-option
                  v-for="item in pList"
                  :key="item.id"
                  :label="item.title"
                  :value="item.position"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>-->
        </el-row>
        <el-form-item
          label
          class="btn-item"
        >
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-search"
            plain
            @click="search"
          >搜索</el-button>
          <span
            class="btn-reset"
            @click="resetForm('searchForm')"
          >清空搜索条件</span>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        v-loading="listLoading"
        header-row-class-name="table-header"
        element-loading-text="给我一点时间"
        border
        highlight-current-row
      >
        <el-table-column
          align="center"
          label="标题"
          prop="title"
        ></el-table-column>
        <el-table-column
          align="center"
          label="图片"
          prop="imageUrl"
        >
          <template slot-scope="scope">
            <img
              :src="scope.row.imageUrl"
              style="max-width: 100%; max-height: 100px"
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="排序"
          prop="sort"
          width="80"
        ></el-table-column>
        <el-table-column
          align="center"
          label="是否启用"
          width="120"
        >
          <template slot-scope="scope">
            <!--<el-switch-->
            <!--disabled-->
            <!--v-model="scope.row.status"-->
            <!--@change="updateStatus(scope.row)"-->
            <!--active-color="#13ce66"-->
            <!--inactive-color="#ff4949"-->
            <!--active-text="是"-->
            <!--inactive-text="否"-->
            <!--:active-value="1"-->
            <!--:inactive-value="0">-->
            <!--</el-switch>-->
            <span
              v-text="scope.row.enabled === 1 ? '是' : '否'"
              :style="`color: ${scope.row.enabled === 1?'#1a9f03':'#999'}`"
            ></span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="跳转类型"
        >
          <template slot-scope="scope">
            <span>{{scope.row.linkType|linkType}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="创建时间"
        >
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="修改时间"
        >
          <template slot-scope="scope">
            <span>{{formatDate(scope.row.updatedAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="120" v-if="rightsButtons['stop'] || rightsButtons['edit']">
          <template slot-scope="scope">
            <el-button v-if="rightsButtons['stop'] && scope.row.enabled===1" type="danger" size="mini" @click="changeAdStatus(scope.row)">下架</el-button>
            <router-link v-if="rightsButtons['edit'] && scope.row.enabled!==1" :to="{name: 'b-iconEdit', params: {id: scope.row.id,type:'ICON'}}">
              <el-button type="primary" size="mini">编辑</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="listQuery.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="listQuery.pageSize"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="listTotal"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import { searchAdList, getPosition, saveAdSetting } from '@/api/bihuasuan/ad'
export default {
  name: 'b-icon',
  filters: {
    linkType(val) {
      const type = {
        NONE: '无',
        LINK_URL: '链接',
        LINK_INNER: '内页'
      }
      return type[val]
    }
  },
  data() {
    return {
      list: [],
      listQuery: {
        keyword: '',
        pageNum: 1,
        position: '',
        pageSize: 10,
        type: 'ICON'
      },
      pList: [],
      pNameList: [],
      listTotal: 0,
      listLoading: false
    }
  },
  created() {
    this.getPositionList()
  },
  methods: {
    // 获取广告位置列表
    async getPositionList() {
      try {
        const { data } = await getPosition({ type: 'ICON' })
        this.pList = data.list
        this.getList()
      } catch (error) {
        this.pList = []
      }
    },

    // 获取列表
    async getList() {
      this.listLoading = true
      try {
        const { data } = await searchAdList(this.listQuery)
        this.list = data.list
        this.listTotal = data.total
        this.listLoading = false
      } catch (error) {
        this.list = []
        this.listTotal = 0
        this.listLoading = false
      }
    },
    // 广告状态更改
    async changeAdStatus(val) {
      try {
        const { data } = await saveAdSetting({ ...val, enabled: 0 })
        this.$message.success('操作成功')
        this.getList()
      } catch (error) {
        this.$message.error('操作失败')
      }
    },
    // 清空搜索条件
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields()
      })
    },
    // 搜索
    search() {
      this.listQuery.pageNum = 1
      this.getList()
    },
    //切换每页条数
    handleSizeChange(value) {
      this.listQuery.pageSize = value
      this.getList()
    },
    // 切换分页
    handleCurrentChange(page) {
      this.listQuery.pageNum = page
      this.getList()
    }
  }
}
</script>

<style lang="scss">
.ad-manage-list > section {
  padding: 24px;
  background: #fff;
}
</style>
